<template>
	<el-upload class="avatar-uploader" :action="action" :show-file-list="false" :headers="headers"
		:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :multiple="false" drag>
		<i class="el-icon-plus avatar-uploader-icon"></i>
	</el-upload>
</template>

<script>
	import {
		ElMessage
	} from 'element-plus'
	import {
		getEnvs
	} from "/@/utils/envs.js"
	import {
		TOKEN,
		GLOBAL_DATA
	} from '/@/api/constant'
	import {
		getCookieByKey
	} from '/@/utils/cookies'
	import {
		Delete
	} from '@element-plus/icons-vue'
	export default {
		name: 'ImportFile',
		components: {
			Delete
		},
		props: ['url'],
		data: function() {
			return {
				action: '',
			};
		},
		computed: {
			headers() {
				return {
					"Authori-zation": getCookieByKey(TOKEN) || ''
				}
			}
		},
		mounted() {
			this.action = this.getBaseUrl() + this.url;
		},

		methods: {
			getBaseUrl() {
				const {
					envStr
				} = getEnvs()
				console.log("envStr", envStr);
				// const baseUrlStr = envStr === 'dev' ? import.meta.env.VITE_APP_API_BASE_URL : GLOBAL_DATA[envStr]['baseUrl']
				return GLOBAL_DATA[envStr]['baseUrl']
			},
			handleAvatarSuccess(res, file) {
				console.log(res, 'dta>>>>>>img');
				if (res.code == 200) {
					this.$emit("successMsg", res.data)
				} else {
					ElMessage({
						message: res.message || 'Error',
						type: 'error',
						duration: 3 * 1000
					})
				}

			},

			beforeAvatarUpload(file) {

				//const isLt2M = file.size / 1024 / 1024;

				// if (!isJPG) {
				// 	this.$message.error('上传头像图片只能是 JPG 格式!');
				// }
				// if (!isLt2M) {
				// 	this.$message.error('上传头像图片大小不能超过 2MB!');
				// }
				return true;
			}
		}
	}
</script>
<style scoped>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	.avatar {
		width: 100px;
		height: 100px;
		display: block;
	}

	.model {
		background-color: #000000;
		width: 100px;
		height: 100px;
		position: absolute;
		opacity: 0;
	}

	.model:hover {
		opacity: 0.6;
	}

	.icon {
		width: 30px;
	}
</style>
